<script setup lang="ts">
import { ref } from 'vue'

const imgUrl = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
const msg = ref('百度一下')
const isRed = ref(true)
const isOrg = ref(true)
const change=()=>{
  // 代码中修改数据，需通过 .value
  isRed.value=!isRed.value
  isOrg.value=!isOrg.value
}
</script>


<template>
  <!-- 基本用法 -->
  <!-- <img v-bind:src="imgUrl" v-bind:title="msg" alt=""> -->
  <img :src="imgUrl" :title="msg" alt="">
  <!-- :class="{类名：是否生效的表达式}" -->
  <button class="btn" :class="{skyblue:isRed,org:isOrg}" @click="change">change</button>
  <!-- ref 定义的数据在 UI 界面中使用或修改不需要写 .value -->
  <button class="btn" :class="{skyblue:isRed,org:isOrg}" @click=" isRed=!isRed">isRed=!isRed</button>
</template>

<style>
img{
  width: 200px;
  height: 100px;
}
  .btn{
    font-weight:500;
    height: 50px;
  }
  .skyblue{
    background-color: skyblue;
  }
  .org{
    border: 1px pink solid;
  }
</style>
